<template>
  <s-layout class="set-wrap" title="整车列表" :bgStyle="{ color: '#090909' }">
    <view class="car">
      <view class="item ss-flex " v-for="item in list" @tap="sheep.$router.go('/pages/inherit/vehicleDetails', { id: 1 })">
        <view class="item-l ">
          <image src="@/static/img/car.png"></image>
        </view>
        <view class="item-r ss-flex-1 ss-flex  ss-row-between">
          <view>
            <view class="text-1">红旗E001</view>
            <view class="text-2">￥89888</view>
            <view class="text-3">￥122000</view>
          </view>
          <button class="btn">
            立即预订
          </button>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import sheep from '@/sheep';

  const list = ref([
    { text: '汽车轮胎', path: '/pages/inherit/officialDetail' },
    { text: '专题详情', path: '/pages/inherit/topicDetails' },
    { text: '市场详情', path: '/pages/inherit/marketDetails' },
    { text: '品牌孵化详情', path: '/pages/inherit/brandIncubationDetails' },
    { text: '整车', path: '/pages/inherit/completeVehicle' },
  ]);
  const template = computed(() => sheep.$store('app').template?.home);
</script>

<style lang="scss" scoped>
  .car {
    padding: 15px;
    box-sizing: border-box;
  }

  .item {
    padding: 15px;
    box-sizing: border-box;
    background: #1E1E1E;
    border-radius: 10px;
    margin-bottom: 10px;

    .item-l {
      image {
        width: 70px;
        height: 70px;
        margin-right: 16px;
      }
    }

    .item-r {
      .text-1 {
        font-weight: 400;
        font-size: 15px;
        color: #E4E4E4;
      }

      .text-2 {
        font-weight: 500;
        font-size: 16px;
        color: #00A1FF;
        margin: 7px 0 3px;
      }

      .text-3 {
        font-weight: 300;
        font-size: 12px;
        color: #888888;
        text-decoration: line-through;
      }

      button {
        width: 75px;
        height: 27px;
        line-height: 27px;
        text-align: center;
        background: linear-gradient(90deg, #45C9F0, #36F6AF);
        border-radius: 13px;
        font-weight: 500;
        font-size: 12px;
        color: #090909;
        margin: 0;
        padding: 0;
      }
    }
  }
</style>
